<template>
	<flowProgress :degree="num * 0.01">{{ num }}%</flowProgress>
	<flowProgress 
		:degree="num * 0.01" 
		progressType="line"
		color="orange"
	></flowProgress>
	<flowProgress 
		:degree="num * 0.01" 
		:direction="false"
		color="green"
	>{{ num }}%</flowProgress>
	<view @click="add">点击控制进度条</view>
	
	<view style="display: flex;flex-direction: column;gap: 40rpx;">
		<view>
			<status 
				:procedureList="list"
				:procedureTips="false"
			></status>
		</view>
		<view>
			<status 
				:procedureList="list"
				:isRow="false"
				procedureCurrent="2"
				activeColor="pink"
			></status>
		</view>
		<view>
			<status 
				barType="1" 
				:procedureList="list"
			></status>
		</view>
		<view>
			<status 
				barType="1" 
				:procedureList="list"
				procedureCurrent="2"
				:procedureTips="false"
				activeColor="orange"
			></status>
		</view>
	</view>
</template>

<script setup>
import flowProgress from './component/flow-progress.vue'
import { ref } from 'vue'
const num = ref(0);
const add = () => {
	num.value++;
}

import status from './component/flow-status.vue'
const list = [{
	name: '付款2'
},{
	name: '发货1'
},{
	name: '收货2'
},{
	name:'完成3'
}];
</script>

<style>
</style>